import React, { useState } from "react";
import axios from "axios";
import pubsub from "pubsub-js";
export default function Header() {
  const [addList, setAddList] = useState("");
  const getList = async () => {
    pubsub.publish("github", {
        isInit: false,
        isSearch: true,
        data: [],
      });
    const result = await axios.get(
      "https://api.github.com/search/users?q=" + addList
    );
    pubsub.publish("github", {
      isInit: false,
      isSearch: false,
      data: result.data.items,
    });
  };
  return (
    <div>
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            type="text"
            value={addList}
            onChange={(e) => {
              setAddList(e.target.value);
            }}
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick={getList}>Search</button>
        </div>
      </section>
    </div>
  );
}
